import React from 'react'
import useForceUpdate from '../../../hooks/useForceUpdate';
import { useNavigate,useLocation } from "react-router-dom"
import eventBus from '../../../utils/eventBus';
import { Layout, Menu, Modal } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
const { confirm } = Modal;
const { Header } = Layout;

const items1 = [{key:"/nav/userCenter",label:'个人中心'}, {key:"",label:'退出登录'}].map((item) => ({
    key:item.key,
    label: item.label,
}));
export default function MyHeader() {
    const navigate = useNavigate()
    const ForceUpdate = useForceUpdate()
    const location = useLocation()
    React.useEffect(()=>{
        eventBus.addListener("syncUserInfo",()=>{
            ForceUpdate()
        })
    },[])
    const userInfo = JSON.parse(localStorage.userInfo)
    function headBtn(parmas) {
        switch (parmas.key) {
            case "/nav/userCenter":
                navigate("/nav/userCenter")
                break;
            case "":
                confirm({
                    title: '确认退出登录?',
                    icon: <ExclamationCircleFilled />,
                    okText:"确认",
                    cancelText: '取消',
                    onOk() {
                        localStorage.clear()
                        navigate("/login",{replace:true})
                    },
                    onCancel() {},
                });
                break;
        }
    }
    return (
        <Header className="header" style={{ display: "flex", justifyContent: "space-between" }}>
            <div style={{ display: "flex", alignItems: "center", color: "#ffffff" }}>
                <span style={{ fontSize: 30, fontStyle: "italic" }}>蜗牛学苑</span>
                <span style={{ marginLeft: 30 }}>欢迎你 {userInfo.account} !</span>
                <img style={{ width: 40, marginLeft: 30 }} src={`http://jacklv.cn/images/${userInfo.imgUrl}`} alt="" />
            </div>
            <Menu style={{width:200}} onClick={headBtn} theme="dark" mode="horizontal" selectedKeys={[location.pathname]} items={items1} />
        </Header>
    )
}
